<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>商品编辑</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<!-- kindeditor富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

	<!-- bootstarp-fileinput -->
	<link rel="stylesheet" type="text/css" href="../js/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >

<!-- 正文区域 -->
<section class="content">

	<div class="box-body">

		<!--tab页-->
		<div class="nav-tabs-custom">

			<!--tab头-->
			<ul class="nav nav-tabs">
				<li class="active">
					<a href="#home" data-toggle="tab">商品基本信息</a>
				</li>
				<li >
					<a href="#pic_upload" data-toggle="tab">商品图片</a>
				</li>
				<li >
					<a href="#customAttribute" data-toggle="tab">扩展属性</a>
				</li>
				<li >
					<a href="#spec" data-toggle="tab" >规格</a>
				</li>
			</ul>
			<!--tab头/-->

			<!--tab内容-->
			<div class="tab-content">

				<!--表单内容-->
				<div class="tab-pane active" id="home">
					<div class="row data-type">
						<div class="col-md-2 title">商品分类</div>

						<div class="col-md-10 data">
							<table>
								<tr>
									<td>
										<select class="form-control select-sm" id="category1Id" onchange="getCategory2Id(this.value)">
										</select>
									</td>
									<td>
										<select class="form-control select-sm" id="category2Id" onchange="getCategory3Id(this.value)"></select>
									</td>
									<td>
										<select class="form-control select-sm" id="category3Id" onchange="getThisItemTypeId(this.value)"></select>
									</td>
									<td>
										模板ID:<span id="typeId"></span>
									</td>
								</tr>
							</table>

						</div>


						<div class="col-md-2 title">商品名称</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="商品名称" value="" id="goodsNameId">
						</div>

						<div class="col-md-2 title">品牌</div>
						<div class="col-md-10 data">
							<select class="form-control" id="brandId"></select>
						</div>

						<div class="col-md-2 title">副标题</div>
						<div class="col-md-10 data">
							<input type="text" class="form-control" placeholder="副标题" value="" id="captionId">
						</div>

						<div class="col-md-2 title">价格</div>
						<div class="col-md-10 data">
							<div class="input-group">
								<span class="input-group-addon">¥</span>
								<input type="text" class="form-control"  placeholder="价格" value="" id="priceId">
							</div>
						</div>

						<div class="col-md-2 title editer">商品介绍</div>
						<div class="col-md-10 data editer">
							<textarea id="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
						</div>

						<div class="col-md-2 title rowHeight2x">包装列表</div>
						<div class="col-md-10 data rowHeight2x">

							<textarea rows="4"  class="form-control" placeholder="包装列表" id="packageListId"></textarea>
						</div>

						<div class="col-md-2 title rowHeight2x">售后服务</div>
						<div class="col-md-10 data rowHeight2x">
							<textarea rows="4"  class="form-control" placeholder="售后服务" id="saleServiceId"></textarea>
						</div>


					</div>
				</div>

				<!--图片上传-->
				<div class="tab-pane" id="pic_upload">
					<div class="row data-type">
						<!-- 颜色图片 -->
						<div class="btn-group">
							<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
						</div>

						<table class="table table-bordered table-striped table-hover dataTable">
							<thead>
							<tr>

								<th class="sorting">颜色</th>
								<th class="sorting">图片</th>
								<th class="sorting">操作</th>
							</thead>
							<tbody id="imgTemplateId">
							<!--<tr>
                                  <td>

                                  </td>
                                  <td>
                                         <img alt="" src="" width="100px" height="100px">
                                  </td>
                                   <td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>
                            </tr>-->
							</tbody>
						</table>

					</div>
				</div>


				<!--扩展属性-->
				<div class="tab-pane" id="customAttribute">
					<div class="row data-type" id="customAttributeItemsId">
						<!--<div>
                            <div class="col-md-2 title">扩展属性1</div>
                            <div class="col-md-10 data">
                                  <input class="form-control" placeholder="扩展属性1">
                            </div>
                        </div>-->
					</div>
				</div>

				<!--规格-->
				<div class="tab-pane" id="spec">
					<div class="row data-type">
						<div class="col-md-2 title">是否启用规格</div>
						<div class="col-md-10 data">
							<input type="checkbox" checked="checked">
						</div>
					</div>
					<p>

					<div>

						<div class="row data-type" id="specificationItemsId">

							<!--<div>
                                <div class="col-md-2 title">
                                    屏幕尺寸
                                </div>
                                <div class="col-md-10 data">
                                    <span>
                                        <input  type="checkbox" >4.0
                                    </span>
                                    <span>
                                        <input  type="checkbox" >4.5
                                    </span>
                                    <span>
                                        <input  type="checkbox" >5.0
                                    </span>
                                </div>
                            </div>-->

						</div>


						<div class="row data-type">
							<table class="table table-bordered table-striped table-hover dataTable">
								<thead>
								<tr>
									<th class="sorting">网络</th>
									<th class="sorting">机身内存</th>
									<th class="sorting">价格</th>
									<th class="sorting">库存</th>
									<th class="sorting">是否启用</th>
									<th class="sorting">是否默认</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td>
										电信4G
									</td>
									<td>
										128G
									</td>
									<td>
										<input class="form-control"  placeholder="价格" id="priceId1">
									</td>
									<td>
										<input class="form-control" placeholder="库存数量" id="numId1">
									</td>
									<td>
										<input type="checkbox" checked="checked">
									</td>
									<td>
										<input type="checkbox" checked="checked">
									</td>
								</tr>
								<tr>
									<td>
										联通3G
									</td>
									<td>
										64G
									</td>
									<td>
										<input class="form-control"  placeholder="价格" id="priceId2">
									</td>
									<td>
										<input class="form-control" placeholder="库存数量" id="numId2">
									</td>
									<td>
										<input type="checkbox" checked="checked">
									</td>
									<td>
										<input type="checkbox" checked="checked">
									</td>
								</tr>

								</tbody>
							</table>

						</div>

					</div>
				</div>

			</div>
			<!--tab内容/-->
			<!--表单内容/-->

		</div>




	</div>
	<div class="btn-toolbar list-toolbar">
		<button class="btn btn-primary" onclick="addGoods()"><i class="fa fa-save"></i>保存</button>
		<button class="btn btn-default" >返回列表</button>
	</div>

</section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">上传商品图片</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped">
					<tr>
						<td>颜色</td>
						<td><input  class="form-control" placeholder="颜色" id="colorId">  </td>
					</tr>
					<tr>
						<td>商品图片</td>
						<td>
							<form>
								<table>
									<tr>
										<td>
											<label class="control-label" for="myFile">上传图片</label><!--multiple 支持多文件上传  不加这个只能上传一个文件  -->
											<input type="file" id="myFile" name="myFile" multiple />
											<input type="text" name="rimage" id="fileAddr" value="">
											<input type="hidden" id="" name="sourceid" value="0"/>
										</td>
									</tr>
								</table>
							</form>
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" onclick="addImgTemplate()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>


<!-- 正文区域 /-->
<script type="text/javascript">
	/*var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});*/
</script>
</body>
<script>
	/*KindEditor编辑器初始化*/
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('#content', {
			allowFileManager : true
		});
	});


	//页面加载完成初始化一级分类
	$(function(){
		var options = getOption(0);
		$("#category1Id").html(options);
		fileInit();
	})

	//选定一级分类后根据一级分类的id去获取二级分类
	function getCategory2Id(pid){
		var options = getOption(pid);
		$("#category2Id").html(options);
		$("#category3Id").html("<option value='-1'>--请选择--</option>");
	}

	//选定二级分类后根据二级分类的id去获取三级分类
	function getCategory3Id(pid){
		var options = getOption(pid);
		$("#category3Id").html(options);
	}


	//当选中三级分类的时候获取被选中的分类id去查询他对应的模板id
	function getThisItemTypeId(id){
		$.ajax({
			url:"/item/getThisItemTypeId",
			type:"post",
			dataType:"json",
			data:{id:id},
			async:false,
			success:function(result){
				var data = result.data;
				$("#typeId").html(data.typeId);
				//查出该用户所选分类所对应的模板后，拿着模板id去模板表查询对应的品牌信息
				getTypeTemplateById(data.typeId);
			},
			error:function(){
				alert("系统异常");
			}
		})
	}

	//根据分类获得的模板id去查询模板表获得改模板对应的品牌
	//将品牌信息写入品牌选项中
	function getTypeTemplateById(id){
		$.ajax({
			url:"/typeTemplate/getTypeTemplateById",
			type:"post",
			dataType:"json",
			data:{id:id},
			async:false,
			success:function(result){
				//获取对应的模板信息
				var data = result.data;
				//获取改模板关联的品牌信息
				var brands = data.brandIds;
				//将品牌信息这个json字符串转换成json对象集合
				var brandList = JSON.parse(brands);
				//将品牌写入品牌下拉框
				var options = '';
				$(brandList).each(function(i,e){
					options += '<option value="'+e.id+'">'+e.text+'</option>';
				})
				$("#brandId").html(options);
				//初始化拓展属性
				initCustomAttributeItems(data);
				//初始化规格
				initSpecificationItems(data);
			},
			error:function(){
				alert("系统异常");
			}
		})
	}

	//初始化拓展属性
	function initCustomAttributeItems(data){
		//获的该用户选择分类对应模板 该模板拥有的拓展属性json字符串
		var customAttributeItemsJson = data.customAttributeItems;
		//转换为对象集合
		var customAttributeItems = JSON.parse(customAttributeItemsJson);
		//将拓展属性名拼接写入
		var result = '';
		$(customAttributeItems).each(function(i,e){
			result += '<div><div class="col-md-2 title">'+e.text+'</div>' +
					'<div class="col-md-10 data"><input class="form-control" placeholder="'+e.text+'"></div></div>';
		})
		$("#customAttributeItemsId").html(result);
	}

	//初始化规格
	function initSpecificationItems(data){
		var specIds = data.specIds;
		//传递到后台 查询每个规格对应的规格选项
		$.ajax({
			url:"/specificationOption/getspecificationOptionsBySpecificationId",
			type:"post",
			dataType:"json",
			data:{specIds:specIds},
			async:false,
			success:function(result){
				var specificationItems = result.data;
				var guigeResult = '';
				$(specificationItems).each(function(i,e){
					var attributeName = e.attributeName;
					var guige = '<div><div class="col-md-2 title">'+attributeName+'</div><div class="col-md-10 data">';
					var attributeValueList = e.attributeValue;
					$(attributeValueList).each(function(i,e){
						guige += '<span><input  type="checkbox" >'+e+'</span>';
					})
					guige += '</div></div>';
					guigeResult += guige;
				})
				$("#specificationItemsId").html(guigeResult);
			},
			error:function(){
				alert("系统异常")
			}
		})
	}

	//封装方法 用于拼接option
	function getOption(pid){
		var options = '<option value="1">--请选择--</option>';
		$.ajax({
			url:"/item/getItemCatByParentId",
			type:"post",
			dataType:"json",
			data:{pid:pid},
			async:false,
			success:function(result){
				var data = result.data;
				$(data).each(function(i,e){
					options += '<option value="'+e.id+'">'+e.name+'</option>';
				})
			},
			error:function(){
				alert("系统异常");
			}
		})
		return options;
	}

	//保存商品信息
	function addGoods(){

		/*获取商品基本信息页数据开始*/
		//获取选中的一级分类id
		var option1 = $("#category1Id option:selected");
		var category1Id = option1.val();
		//二级
		var option2 = $("#category2Id option:selected");
		var category2Id = option2.val();
		//三级
		var option3 = $("#category3Id option:selected");
		var category3Id = option3.val();
		//模板id
		var typeTemplateId = $("#typeId").html();
		//获取商品名称
		var goodsName = $("#goodsNameId").val();
		//获取选中的品牌id
		var brandOption = $("#brandId option:selected");
		var brandId = brandOption.val();
		//获取副标题
		var caption = $("#captionId").val();
		//获取价格
		var price = $("#priceId").val();
		//获取包装列表
		var packageList = $("#packageListId").val();
		//获取售后服务
		var saleService = $("#saleServiceId").val();
		//获取kindeditor富文本中的内容
		editor.sync();//实例化编辑器对象
		var introduction = $("#content").val();
		/*获取商品基本信息页数据结束*/

		//获取图片及颜色
		var itemImagesList = [];
		var url = '';
		$("#imgTemplateId").find("tr").each(function(){
			var tdArr = $(this).children();
			//第一个td 颜色
			var color = tdArr.eq(0).html();
			//获得图片的url
			url = tdArr.eq(1).find("img").attr("src");
			var data = '{"color":"'+color+'","url":"'+url+'"}';
			itemImagesList.push(data);
		})
		var itemImages ="["+itemImagesList+"]";

		//获取拓展属性
		var customAttributeItemsList = [];
		//获取拓展属性值
		$("#customAttributeItemsId").find("input").each(function(){
			var text = $(this).attr("placeholder");
			var value = $(this).val();
			var data = '{"text":"'+text+'","value":"'+value+'"}';
			customAttributeItemsList.push(data);
		})
		var customAttributeItems = "["+customAttributeItemsList+"]";


		//由于规格复选框点击下面不会变动 下面是写死的，所以，我们就直接写死goods_desc表的specificationItems字段
		var specificationItems = '[{"attributeName":"网络","attributeValue":["电信4G","联通3G"]},{"attributeName":"机身内存","attributeValue":["128G","64G"]}]';
		//拼接第一个商品的title(sku名称)
		var title1 = goodsName+' 电信4G 128G';
		//价格库存1
		var price1 = $("#priceId1").val();
		var num1 = $("#numId1").val();
		//价格库存2
		var price2 = $("#priceId2").val();
		var num2 = $("#numId2").val();
		//三级分类名称
		var category = option3.text();
		//品牌名称
		var brandName = brandOption.text();
		//var spec1 = "{'网络':'电信4G,'机身内存':'128G}";
		//规格 添加到item表
		var itemList = '[';
		var item1 = '{"title":"'+title1+'","sellPoint":"'+caption+'","price":"'+price1+'.00","num":"'+num1+'","image":"'+url+'","categoryId":"'+category3Id+'","category":"'+category+'","brand":"'+brandName+'","spec":{"网络":"电信4G","机身内存":"128G"}},';
		itemList += item1;
		//拼接第二个商品的title(sku名称)
		var title2 = goodsName+' 联通3G 64';
		//var spec2 = "{'网络':'联通3G','机身内存':'64G'}";
		var item2 = '{"title":"'+title2+'","sellPoint":"'+caption+'","price":"'+price2+'.00","num":"'+num2+'","image":"'+url+'","categoryId":"'+category3Id+'","category":"'+category+'","brand":"'+brandName+'","spec":{"网络":"联通3G","机身内存":"64G"}}';
		itemList += item2+']';
		console.log(itemList);
		//传入后台并保存
		$.ajax({
			url:"/goods/addGoods",
			type:"post",
			dataType:"json",
			data:{category1Id:category1Id,category2Id:category2Id,category3Id:category3Id,typeTemplateId:typeTemplateId,goodsName:goodsName,brandId:brandId,caption:caption,price:price,packageList:packageList,saleService:saleService,introduction:introduction,
				itemImages:itemImages,customAttributeItems:customAttributeItems,specificationItems:specificationItems,
				itemList:itemList},
			async:false,
			success:function(result){
				window.location.reload();
				alert("增加成功");
			},
			error:function(){
				alert("系统异常");
			}
		})
	}


	//初始化上传插件 及上传路径和回显配置
	function fileInit(){
		$('#myFile').fileinput({
			language: 'zh',
			uploadUrl: '/goods/upLoadFile',
			maxFileCount :3, // multiple
			enctype : 'multipart/form-data',
			maxFileSize : 1024, //单位为kb
			allowedFileExtensions : ['jpg', 'gif', 'png'],//限制上传文件类型
			browseClass: 'btn btn-primary'
		});

		$('#myFile').on('fileuploaded',function(event, data, previewId, index){
			//data.response获取的就是后台return 的对象
			var result = data.response;
			var url = result.data;
			$("#fileAddr").val(url);
		})
	}

	//增加图片点击保存
	function addImgTemplate(){
		//获取颜色
		var color = $("#colorId").val();
		var url = $("#fileAddr").val();
		var i = 0;
		var data = '<tr><td>'+color+'</td><td><img src="'+url+'" width="100px" height="100px"></td><td> <button type="button" class="btn btn-default" title="删除" onclick="delimgTemplate(this)"><i class="fa fa-trash-o"></i>删除</button></td></tr>';
		$("#imgTemplateId").append(data);
	}

	//删除图片
	function delimgTemplate(obj){
		var tr = $(obj).parent().parent();
		tr.remove();
	}
</script>
</html>